<template>
	<el-row class="serverHisCpuLoad">
		<el-col :span="11" class="serverHisCpuLoad-box ScaleCSSViewport_unzoom">
			<!-- <div ref="HisCpuLoad" :class="{divHide: !dataTotal}"></div>
		        <div 
		            class="noDataBox"
		            :class="{divHide: dataTotal > 0}">
		            <span>无数据</span>
		        </div> -->
			<div class="two" ref="HisCpuLoad" v-loading="!dataTotal">
			</div>
		</el-col>
		<el-col :span="11" style="height:100%;">
			<v-HistServerMemoryLoad :allData="memoryData">
			</v-HistServerMemoryLoad>
		</el-col>
		
	</el-row>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js';
	import bus from '@/components/common/bus.js'
	import vHistServerMemoryLoad from "historyData/servers/HistServerMemoryLoad.vue";
	export default {
		components: {
			vHistServerMemoryLoad,
		},
		props: {
			allData: {},
			memoryData: {}
		},
		data() {
			return {
				dataTotal: 0,
				usedData: [],
				userData:[],
				systemData:[],
				waitData:[],
				timeData: [],
				HisCpuLoad: {},
				EChartsOption: {
					title: {
						left: 'center',
						text: 'CPU 总使用率'
					},
					grid: {
						left: 'center',
						top: 'middle',
						width: '95%',
						height: '80%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						// formatter:'{b}<br /> {a} {c}%'
						formatter: function(params) {
							console.log('params',params)
							return params[0].axisValue + '</br>' +
								params[0].marker + 'CPU使用率：' + params[0].data + '%' + '</br>' +
								params[1].marker + '用户使用率：' + `${params[1].data ? params[1].data + "%" : "无"}` + '</br>' +
								params[2].marker + '系统使用率：' + `${params[2].data ? params[2].data + "%" : "无"}` + '</br>' +
								params[3].marker + '系统等待：' + `${params[3].data ? params[3].data + "%" : "无"}` + '</br>'
						}
					},
					xAxis: {
						type: 'category',
						data: this.timeData,

					},
					yAxis: {
						type: 'value',
						max: '100'
					},

					dataZoom: [{
						type: 'inside',
						start: 0,
						end: 100
					}, {
						start: 0,
						end: 100,
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					series: []
				}
			}
		},
		created() {
			this.formatData();
			console.log(this.EChartsOption)
		},
		mounted() {
			this.HisCpuLoad = this.$echarts.init(this.$refs.HisCpuLoad);
			this.drawHisCpuLoad();
			
			window.onresize = () => {
			
				let myEchart = this.$echarts.init(this.$refs.HisCpuLoad);
				myEchart.resize();
			}
			
		},
		computed: {},
		methods: {
			formatData() {
				this.dataTotal = this.allData.dataTotal;
				this.timeData = this.allData.Time;
				this.usedData = this.allData.USED;
				this.userData = this.allData.user
				this.systemData = this.allData.system
				this.waitData = this.allData.wait
				console.log('数据',this.systemData)
				this.$nextTick(function() {
					this.HisCpuLoad.setOption({
						xAxis: {
							data: this.timeData
						},
						series: [{
							name: "CPU 使用率",
							type: 'line',
							data: this.usedData
						},
						{
							name: "用户使用",
							type: 'line',
							data: this.userData,
						},
						{
							name: "系统使用",
							type: 'line',
							data: this.systemData,
						},
						{
							name: "系统等待",
							type: 'line',
							data: this.waitData,
						}]
					});
				})

			},
			drawHisCpuLoad() {
				this.HisCpuLoad.setOption(this.EChartsOption);
				// window.onresize = function(){
				//     setTimeout("myChart.resize()",100);
				// }
			},
		},
		watch: {
			allData: {
				handler(newValue, oldValue) {
					this.allData = newValue;
					this.formatData();
				},
				deep: true
			}
		}
	}
</script>
<style scoped>
	.serverHisCpuLoad {
		height: 100%;
		margin-bottom: 0 !important;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.serverHisCpuLoad-box {
		height: 100%;
	}

	.serverHisCpuLoad-box div {
		height: 100%;
	}

	.divHide {
		display: none;
	}

	.serverHisCpuLoad-box .noDataBox {
		height: 100%;
		text-align: center;
	}

	.serverHisCpuLoad-box .noDataBox::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}

	.noDataBox span {
		font-size: xx-large;
	}

	.serverHisCpuLoad-box>>>.el-loading-spinner {
		font-size: 52px;
	}

	.serverHisCpuLoad-box>>>.el-loading-spinner p {
		font-size: 26px;
	}
</style>
